<template>
    <div class="residentAdmin-box">
        <PeopleNav></PeopleNav>
        <div class="iconBox">
            <el-icon>
                <Fold @click="showCardIcon" />
            </el-icon>
            <el-icon>
                <Menu @click="showTabelIcon" />
            </el-icon>
        </div>
        <ul v-if="showCard">
            <li v-for="(item, index) in residentAdminList" :key="index"
                @click="imgJump(`/home/ResidentParticulars/${residentAdminList[index].id}`)">
                <img :src="'http://127.0.0.1:3000/' + item.picture" alt="">
                <div class="residentAdmin-msg">
                    <span style="font-size: 18px;
                     margin: 0 10px;">{{ item.name }}</span>
                    <span style="font-size: 12px;
                    color: #999;">{{ currentYear - Number(item.birthday.slice(0, 4)) }}岁</span>
                    <span v-if="item.gender === '0'">
                        <el-icon>
                            <Male />
                        </el-icon>
                    </span>
                    <span v-if="item.gender === '1'">
                        <el-icon>
                            <Female />
                        </el-icon>
                    </span>
                </div>
                <div class="residentAdmin-smallBox">
                    <span>{{ item.statusMsg }}</span>
                </div>
                <div class="residentAdmin-footer">
                    <span v-for="(items, index) in item.labelArr" :key="index">{{ items.name }}</span>
                </div>
            </li>
        </ul>

        <div class="residentMsg-box" v-if="showTabel">
            <el-table stripe :data="residentAdminList" style="width: 100%">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column property="number" label="编号" width="140" align="center" />
                <el-table-column label="头像" width="80" align="center">
                    <template #default="scope">
                        <img :src="'http://127.0.0.1:3000/' + scope.row.picture" alt=""
                            style="width: 50px;height: 50px;border-radius: 25px;">
                    </template>
                </el-table-column>
                <el-table-column property="name" label="姓名" width="80" show-overflow-tooltip align="center" />
                <el-table-column property="IDCard" label="身份证号" width="125" show-overflow-tooltip align="center" />
                <el-table-column property="tel" label="联系电话" width="125" show-overflow-tooltip align="center" />
                <el-table-column property="statusMsg" label="签约状态" width="100" show-overflow-tooltip align="center" />
                <el-table-column label="用户标签" width="110" show-overflow-tooltip align="center">
                    <template #default="scope">
                        <span v-for="(item, index) in scope.row.labelArr" :key="index">{{ item.name }}</span>
                    </template>
                </el-table-column>>
                <el-table-column label="居民状态" width="80" show-overflow-tooltip align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.flag" class="ml-2" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #999" active-text="启用"
                            inactive-text="禁用" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" show-overflow-tooltip align="center" class="operation">
                    <template #default="scope">
                        <span class="operationSpan" @click="sendResidentId(`/home/ResidentParticulars/${scope.row.id}`)"
                            style="color: #2984f8;margin-right: 5px;">查看详情</span>
                        <span class="operationSpan" style="color: #2984f8;"><router-link
                                style="color:#2984f8;text-decoration: none;margin-right: 5px;"
                                to="/home/message">发送消息</router-link></span>
                        <span class="operationSpan" style="color: #2984f8;margin-right: 5px;"
                            @click="modifyResident(scope.row)">编辑</span>
                        <span class="operationSpan"
                            style="color:#2984f8;text-decoration: none;margin-right: 5px;">添加服务</span>
                        <span class="operationSpan" style="color: red;" @click="delResident(scope.row.id)">删除</span>
                    </template>

                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import api from '../api'
import residentAdminListType from '../types/adong/residentAdminList'
import PeopleNav from '@/components/peopleNav.vue';
import { useRouter } from 'vue-router'


const showCard = ref<boolean>(true)
const showTabel = ref<boolean>(false)
const showCardIcon = () => {
    showCard.value = true
    showTabel.value = false
}
const showTabelIcon = () => {
    showCard.value = false
    showTabel.value = true
}

const residentAdminList = ref<Array<residentAdminListType>>([])
const getresidentAdminData = async () => {
    const result = await api.residentAdmin.getResidentAdmin()
    residentAdminList.value = result.data.data.result
    console.log('residentAdminList', residentAdminList.value);
}

const currentDate = new Date();
const currentYear = currentDate.getFullYear();
//查看详情
const router = useRouter()
const sendResidentId = (path: any) => {
    router.push(path)
}

//图片跳转查看详情
const imgJump = (path: any) => {
    router.push(path)
}
//修改
const modifyResident = (data: any) => {
    console.log(data);

}
//删除
const delResident = (id: string) => {
    console.log(id);

}

getresidentAdminData()
</script>

<style lang='scss' scoped>
.residentAdmin-box {
    width: 1150px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    min-height: 100vh;

    ul {
        width: 100%;
        display: flex;
        margin-top: 30px;
        justify-content: space-between;

        :hover {
            cursor: pointer;
            background-color: rgba($color: black, $alpha: .1);
        }

        li {
            list-style: none;
            width: 230px;
            height: 290px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

            img {
                width: 84px;
                height: 84px;
                border-radius: 50%;
            }

            .residentAdmin-msg {
                margin: 10px;

                :last-child {
                    font-size: 15px;
                    color: green;
                }
            }

            .residentAdmin-smallBox {
                width: 80px;
                line-height: 25px;
                border-radius: 12px;
                background-color: #28d094;
                font-size: 13px;
                color: white;
                text-align: center;

            }

            .residentAdmin-footer {
                width: 85%;
                display: flex;
                justify-content: space-around;
                margin-top: 10px;

                :first-child {
                    background-color: rgba($color: red, $alpha: .2);
                    color: #FA746B;
                }

                :nth-child(2) {
                    background-color: rgba($color: blue, $alpha: .1);
                    color: #6C76F4;
                }

                :nth-child(3) {
                    background-color: rgba($color: yellow, $alpha: .2);
                    color: #FDDB78;
                }

                span {
                    min-width: 60px;
                    line-height: 25px;
                    border-radius: 12px;
                    font-size: 12px;
                    text-align: center;
                }
            }
        }
    }

    .iconBox {
        float: right;
        margin-top: -25px;

        .el-icon {
            color: #999;
            margin-right: 10px;
        }

        .el-icon:hover {
            cursor: pointer;
            color: #1877f2;
        }
    }

    .residentMsg-box {
        margin-top: 30px;

        .operationSpan:hover {
            cursor: pointer;
            text-decoration: underline;
        }
    }
}
</style>